<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .outer {
        width: 400px;
        height: 400px;
        background-color: #b47171;
        padding: 30px 0;
      }
      .inner {
        width: 200px;
        /* 垂直居中 */
        height: 100px;
        line-height: 100px;
        background-color: darkgreen;
        /* 块元素的左右居中 */
        margin: 0 auto;
        margin-top: 150px;
        text-align: center;
      }
      .box1 {
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 1px solid red;
        margin-top: 10px;
        /* border-box: 盒子的大小包含了边框和内边距，content-box：盒子的大小 = 内容大小+内边距+border */
        box-sizing: border-box;
      }
      .my-outer {
        width: 400px;
        height: 400px;
        background-color: #b47171;
        text-align: center;
        line-height: 400px;
        margin-bottom: 20px;
      }
      .my-outer > span {
        background: green;
      }

      .my-outer1 {
        width: 400px;
        height: 400px;
        background-color: #b47171;
        text-align: center;
        line-height: 400px;
        font-size: 0px;
        margin-bottom: 20px;
      }
      .my-outer1 > span,
      .my-outer1 > img {
        font-size: 40px;
        vertical-align: middle;
        /* 默认样式 */
        /* vertical-align: baseline; */
      }
      .d1 {
        width: 600px;
        background-color: #d86666;
        font-size: 0;
      }
      .my-img {
        /* 只要将vertical-align不设置为baseline就都能避免行内块空白的情况 */
        /* vertical-align: middle; */
        /* display: block; */
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">inner</div>
    </div>
    <div class="box1"></div>
    <div class="my-outer">
      <span>行内元素</span>
    </div>
    <div class="my-outer1">
      <span>一段文字Xg</span>
      <!-- 一段文字Xg -->
      <!-- X -->
      <img
        src="../img/defaultInteriorBackgroundBanner.jpg"
        alt=""
        width="100"
        height="100"
      />
    </div>
    <div style="font-size: 0; margin-bottom: 20px">
      <span class="s1" style="background: blueviolet; font-size: 20px"
        >⽩⽇依⼭尽&nbsp;</span
      >
      <span class="s2" style="background: green; font-size: 20px"
        >⻩河⼊海流</span
      >
      <span class="s3">欲穷千⾥⽬</span>
      <span class="s4">更上⼀层楼</span>
    </div>

    <div class="d1">
      <img width="100" src="../img/avatar.png" alt="" class="my-img" />
    </div>
  </body>
</html>
